<script lang="ts" setup>
withDefaults(
  defineProps<{
    text?: string
    round?: boolean
    plain?: boolean
    disabled?: boolean
    loading?: boolean
    type?: 'primary' | 'info'
  }>(),
  {
    text: '',
    round: false,
    plain: true,
    loading: false,
    disabled: false,
    type: 'primary'
  }
)
</script>

<template>
  <button
    :class="{
      'gradient-fd940399-fd5b03-130 cursor-not-allowed': disabled,
      'border-rd-20': round,
      'cursor-not-allowed': loading,
      'border-rd-2': plain,
      'gradient-fd9403-fd5b03-130': type === 'primary',
      'bg-242943': type === 'info'
    }"
    hover="~ op80"
    cursor-pointer
    n-tab
    duration-150
    :disabled="disabled || loading"
  >
    <slot name="icon" />
    <span v-if="!loading">{{ text }}</span>
    <div v-else i-ep:loading ma animate-spin text-2xl />
  </button>
</template>
